<template>
  <div class="one-page">

    <div class="page-header">
      <span class="page-header-date">
        <span style="margin-right: 16px;">{{dateTime}}</span>
        {{week}}
      </span>
      <span class="page-header-title">立码停车平台数据系统</span>
      <span class="close-screen" @click="closeScreen">
        <img style="height: 2.2rem;" src="../../../assets/newBigDataSourceImage/close.png">
        <span>退出</span>
      </span>
    </div>

    <div class="content">
      <div class="left">
        <div class="left-left">
          <div class="left-left-top">
            <div class="area-choose">
              <p style="font-size: 2.2rem;color: #fff;text-align: center;line-height: 5rem;">河北省</p>
              <div class="choose-bottom"></div>
            </div>
            <div class="area-choose">
              <p style="font-size: 2.2rem;color: #fff;text-align: center;line-height: 5rem;">石家庄</p>
              <div class="choose-bottom"></div>
            </div>
            <div class="search">
              <img src="../../../assets/newBigDataSourceImage/search.png">
              <input class="search-input" @focus="searchFous" @change="searchBlur" @blur="searchBlur" v-model="seacrhData"></input>
            </div>
          </div>

          <div class="map-box">
            <areaMap @toPage="toPage" />
          </div>
        </div>

        <div class="left-right">
          <div>
            <dateView />
          </div>

          <div class="park-type">
            <parkType />
          </div>

          <div class="in-out">
            <span>车辆入场实时动态</span>
            <carInOut class="car-inout" />
          </div>
        </div>
        <div v-if="userInfoShow" class="message_box">
          <span @click="userInfoShow = false" class="user-info-close">X</span>
          <p v-if="noMessageShow" style="text-align: center;font-size: 26px;color: #fff;margin-top: 150px;">暂未查询到该车辆信息</p>
          <div class="info_box">
            <p>
              <span style="margin-left: 40px;">车场名称</span>
              <span style="margin-left: 80px;">进场时间</span>
              <span style="margin-left: 80px;">出场时间</span>
              <span style="margin-left: 48px;">金额</span>
            </p>
            <div v-for="item in carInfoLists">
              <div style="width: 120px;">{{item.parkName}}</div>
              <div style="width: 150px;">{{item.inTime}}</div>
              <div style="width: 150px;">{{item.outTime}}</div>
              <div style="width: 40px;">{{item.payType}}</div>
              <!-- <span>{{item.parkName}}</span> -->
              <!-- <span>{{item.parkName}}</span> -->
            </div>
          </div>
        </div>
      </div>

      <div class="right">
        <div class="right-top">
          <saturation />
        </div>
        <div class="right-bottom">
          <inOutInfo />
        </div>
      </div>



    </div>
  </div>
</template>

<script>
  import overView from './components/overView.vue'
  import dataSummary from './components/dataSummary.vue'
  import typeProportion from './components/typeProportion.vue'
  import inTimeProportion from './components/inTimeProportion.vue'
  import marktProportion from './components/marktProportion.vue'
  import areaMap from './components/areaMap.vue'


  import inOutInfo from './components/inOutInfo.vue'
  import saturation from './components/saturation.vue'
  import carInOut from './components/carInOut.vue'
  import parkType from './components/parkType.vue'
  import dateView from './components/dateView.vue'

  export default {
    name: 'big-data-screen',
    components: {
      overView,
      dataSummary,
      carInOut,
      typeProportion,
      inTimeProportion,
      marktProportion,
      areaMap,


      inOutInfo,
      saturation,
      parkType,
      dateView

    },
    data() {
      return {
        week: null,
        dateTime: null,
        seacrhData: '搜索停车场内用户',
        userInfoShow: false,
        noMessageShow: false,
        carInfoLists: []
      }
    },
    mounted() {
      this.getDateTime();
    },
    methods: {
      toPage(id) {
        this.$emit('swithPage',id)
      },

      closeScreen() {
        this.$router.push({path:'/'});
      },

      searchFous() {
        this.seacrhData = null;
      },

      searchBlur() {
        if(!this.seacrhData) {
          this.seacrhData = "搜索停车场内用户"
        } else {
          this.userInfoShow = true;
          this.$axios({
            method: 'get',
            url: '/order/orderInfo/idc-car-number-order-info',
            params: {carNumber: this.seacrhData,currentPage: 1,pageSize: 10}
          }).then((res) => {
            console.log(res.data.records)
            if(res.data.records.length) {
              this.noMessageShow = false;
              this.carInfoLists = res.data.records;
            } else {
              this.noMessageShow = true;
            }
          })
        }
      },

      getDateTime() {
        let myDate = new Date();
        let year = myDate.getFullYear();
        let month = String(myDate.getMonth() + 1).padStart(2,0);
        let day = String(myDate.getDate()).padStart(2,0);
        let week = myDate.getDay();
        switch (week) {
          case 0:
            this.week = '星期日';
            break;
          case 1:
            this.week = '星期一';
            break;
          case 2:
            this.week = '星期二';
            break;
          case 3:
            this.week = '星期三';
            break;
          case 4:
            this.week = '星期四';
            break;
          case 5:
            this.week = '星期五';
            break;
          case 6:
            this.week = '星期六'
        }
        this.dateTime = year + '-' + month + '-' + day;
      }
    }
  }
</script>

<style scoped>
  html {
    font-size: 10px;
  }
  p {
    margin: 0;
  }
  .one-page {
    height: 100%;
    padding: 0;
    width: 100%;
  }

  .page-header {
    height: 8.06%;
    width: 100%;
    background-image: url('../../../assets/newBigDataSourceImage/header.png');
    background-size: 100%,100%;
    background-repeat: no-repeat;
    color: #fff;
    display: flex;
    align-items: center;
    padding: 0 75px 0 40px;
    position: relative;
  }

  .page-header-date {
    font-size: 1.8rem;
    color: rgba(22, 118, 233, 1);
  }

  .page-header-title {
    color: #01FBFE;
    font-size: 4rem;
    font-weight: bold;
    letter-spacing: 2px;
    -webkit-mask-image:-webkit-gradient(linear,0 0,0 bottom,from(#157DEA),to(rgba(21,125,234,0.5)));
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .content {
    width: 94.95%;
    max-width: 1823px;
    height: 85.4%;
    max-height: 1012px;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;
  }

  .close-screen {
    position: absolute;
    right: 7.5rem;
    width: 7.6rem;
    height: 3.4rem;
    border: 1px solid #1676E9;
    border-radius: 6px 6px 6px 6px;
    padding: 0 0.4rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }

  .close-screen span {
    color: #1676E9;
    font-size: 1.5rem;
  }

  .close-screen:hover {
    cursor: pointer;
  }

  .left {
    margin-top: 6.4rem;
    width: 73.55%;
    height: 92.97%;
    border: 1px solid transparent;
    border-image-source: url('../../../assets/newBigDataSourceImage/border-image.png');
    border-image-slice: 26 26 26 26;
    border-image-repeat: stretch;
    border-image-width: 20px;
    box-sizing: border-box;
    position: relative;
  }

  .left-left {
    height: 100%;
    display: inline-block;
    width: 60%;
    position: relative;
  }

  .left-left-top {
    width: 100%;
    height: 6rem;
    margin-top: 2.2rem;
    display: flex;
    justify-content: space-between;
    padding-left: 2.8rem;
    /* margin-left: 2.8rem; */
  }

  .area-choose {
    width: 16.2rem;
    height: 100%;
    background-color: #0F439B;
    border: 1px solid #1676E9;
    position: relative;
  }

  .choose-bottom {
    width: 100%;
    height: 1rem;
    background-color: #02F0FD;
    position: absolute;
    bottom: 0;
  }

  .search {
    border: 1px solid #1676E9;
    height: 100%;
    width: 42.5rem;
    padding-left: 6rem;
    position: relative;
    display: flex;
    align-items: center;
  }

  .search img {
    height: 2.7rem;
    width: 2.7rem;
    position: absolute;
    left: 2.7rem;
    top: 50%;
    transform: translateY(-50%);
  }

  .search-input {
    background-color: transparent;
    font-size: 2.2rem;
    padding: 4px;
    border: none;
    outline: none;
    color: #1676E9;
  }

  .map-box {
    width: 88%;
    height: 84%;
    position: absolute;
    left: 6rem;
    bottom: 2.4rem;
  }

  .left-right {
    height: 100%;
    padding-bottom: 2rem;
    width: 32.39%;
    float: right;
    margin-right: 2.6rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  .park-type {
    border: 1px solid #0F459D;
    width: 100%;
    height: 25%;
  }

  .in-out {
    width: 100%;
    height: 26.16%;
  }

  .in-out span {
    display: inline-block;
    font-size: 1.8rem;
    color: #fff;
    margin-bottom: 0.8rem;
  }

  .car-inout {
    border: 1px solid #0F459D;
  }

  .right {
    height: 92.97%;
    width: 25.9%;
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .right-top,
  .right-bottom {
    width: 100%;
    height: 53.6%;
    border: 1px solid transparent;
    border-image-source: url('../../../assets/newBigDataSourceImage/border-image.png');
    border-image-slice: 26 26 26 26;
    border-image-repeat: stretch;
    border-image-width: 20px;
    box-sizing: border-box;
  }

  .right-bottom {
    height: 43%;
  }

  .message_box {
    width: 500px;
    height: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% ,-50%);
    background-color: rgba(21,125,234,0.7);
  }

  .user-info-close {
    font-size: 28px;
    color: #fff;
    float: right;
    margin: 8px;
  }

  .user-info-close {
    cursor: pointer;
  }

  .info_box {
    height: 360px;
    margin-top: 34px;
    padding: 8px;
    color: #fff;
    font-size: 14px;
  }

  .info_box div {
    padding: 6px;
  }

  .info_box div div {
    display: inline-block;
    overflow: hidden;
  }





</style>
